<template>
  <div id="barEchars" ref="echarsRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, defineProps, onUnmounted } from "vue";
// 地图数据
import mapData from "./map/china.json";

defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const echarsRef = ref<HTMLDivElement>();
// 数据
var airData = [
  { name: "北京", value: 39.92 },
  { name: "天津", value: 39.13 },
  { name: "上海", value: 31.22 },
  { name: "重庆", value: 66 },
  { name: "河北", value: 147 },
  { name: "河南", value: 113 },
  { name: "云南", value: 25.04 },
  { name: "辽宁", value: 50 },
  { name: "黑龙江", value: 114 },
  { name: "湖南", value: 175 },
  { name: "安徽", value: 117 },
  { name: "山东", value: 92 },
  { name: "新疆", value: 84 },
  { name: "江苏", value: 67 },
  { name: "浙江", value: 84 },
  { name: "江西", value: 96 },
  { name: "湖北", value: 273 },
  { name: "广西", value: 59 },
  { name: "甘肃", value: 99 },
  { name: "山西", value: 39 },
  { name: "内蒙古", value: 58 },
  { name: "陕西", value: 61 },
  { name: "吉林", value: 51 },
  { name: "福建", value: 29 },
  { name: "贵州", value: 71 },
  { name: "广东", value: 38 },
  { name: "青海", value: 57 },
  { name: "西藏", value: 24 },
  { name: "四川", value: 58 },
  { name: "宁夏", value: 52 },
  { name: "海南", value: 54 },
  { name: "台湾", value: 88 },
  { name: "香港", value: 66 },
  { name: "澳门", value: 77 },
  { name: "南海诸岛", value: 55 },
];

var option = {
  // 配置geo的type为'map', map为'chinaMap'
  geo: {
    type: "map",
    map: "chinaMap",
    // 显示label
    label: {
      show: true,
    },
    zoom: 1,
    //  开启缩放
    // roam: true,
  },
  tooltip: {
    formatter: function (params: any) {
      let tipHtml = "";
      tipHtml = `
                    <div>
                        <span'>${params.name}</span>
                        <span'>${params.value}</span>
                    </div>
                `;
      return tipHtml;
    },
  },
  // 将空气质量的数据设置给series下的对象
  series: [
    {
      type: "map",
      name: "",
      data: airData,
      // 关联geo
      geoIndex: 0,
    },
  ],
  visualMap: {
    min: 0,
    max: 300,
    inRange: {
      color: ["#FFFFFF", "#FF0000"],
    },
    //  显示可拖拽的手柄
    calculable: true,
  },
};

/**
 *  初始化Echarts
 */
let timer: any = null;

const initEcharts = () => {
  const myEchars = echarts.init(echarsRef.value);
  // 设置地图数据
  echarts.registerMap("chinaMap", mapData);
  myEchars.setOption(option);
  let idx = 0;
  timer = setInterval(() => {
    const dataLength = airData.length;
    // 清除之前的高亮
    myEchars.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: idx,
    });
    idx++;
    // 当前下标高亮
    myEchars.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: idx,
    });
    myEchars.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: idx,
    });
    if (idx > dataLength) {
      idx = 0;
    }
  }, 2000);

  window.addEventListener("resize", () => {
    myEchars.resize();
  });
};

onMounted(() => {
  initEcharts();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style lang="scss" scoped></style>
